<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Stellar.js Test Suite</title>
  <!-- Load local jQuery, removing access to $ (use jQuery, not $). -->
  <script src="jquery-loader.js"></script>
  <script>jQuery.noConflict()</script>
  <!-- Load local QUnit (grunt requires v1.0.0 or newer). -->
  <link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
  <link rel="stylesheet" href="jquery.stellar.css" media="screen">
  <script src="../libs/qunit/qunit.js"></script>
  <!-- Load local lib and tests. -->
  <script src="../src/jquery.stellar.js"></script>
</head>
<body>
  <h1 id="qunit-header">
    <a href="?">Stellar.js Test Suite</a> -
    jQuery: <a href="?jquery=1.4.3">v1.4.3</a> |
    <a href="?jquery=1.9.1">v1.9.1</a> |
    <a href="?jquery=2.0.0b2">v2.0.0b2</a>
  </h1>
  <h2 id="qunit-banner"></h2>
  <div id="qunit-testrunner-toolbar"></div>
  <h2 id="qunit-userAgent"></h2>
  <ol id="qunit-tests"></ol>
  
  <div id="qunit-fixture">
    
    <div id="position-absolute">
      <span data-stellar-ratio="-1" class="ratio--1">Ratio: -1</span>
      <span data-stellar-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
      <span data-stellar-ratio="1" class="ratio-1">Ratio 1</span>
      <span data-stellar-ratio="2" class="ratio-2">Ratio 2</span>
    </div>
    
    <div id="position-fixed">
      <span data-stellar-ratio="-1" class="ratio--1">Ratio: -1</span>
      <span data-stellar-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
      <span data-stellar-ratio="1" class="ratio-1">Ratio 1</span>
      <span data-stellar-ratio="2" class="ratio-2">Ratio 2</span>
    </div>

    <div id="background-vertical-only">
      <span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
      <span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
      <span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
      <span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
    </div>

    <div id="background-horizontal-only">
      <span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
      <span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
      <span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
      <span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
    </div>
    
    <div id="background-attachment-scroll">
      <span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
      <span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
      <span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
      <span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
    </div>
      
    <div id="background-attachment-fixed">
      <span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
      <span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
      <span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
      <span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
    </div>
    
    <div id="offset-parent-elements" class="offset-parent" data-stellar-offset-parent="true">
      <div class="default-offset-parent">
        <span data-stellar-ratio="-1" class="ratio--1">Ratio: -1</span>
        <span data-stellar-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
        <span data-stellar-ratio="1" class="ratio-1">Ratio 1</span>
        <span data-stellar-ratio="2" class="ratio-2">Ratio 2</span>
      </div>
    </div>
    
    <div id="offset-parent-elements-with-custom-offsets" class="custom-offsets" data-stellar-offset-parent="true" data-stellar-horizontal-offset="20" data-stellar-vertical-offset="20">
      <div class="default-offset-parent">
        <span data-stellar-ratio="-1" class="ratio--1">Ratio: -1</span>
        <span data-stellar-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
        <span data-stellar-ratio="1" class="ratio-1">Ratio 1</span>
        <span data-stellar-ratio="2" class="ratio-2">Ratio 2</span>
      </div>
    </div>
    
    <div id="offset-parent-backgrounds" class="offset-parent" data-stellar-offset-parent="true">
      <div class="default-offset-parent">
        <span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
        <span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
        <span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
        <span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
      </div>
    </div>
    
    <div id="offset-parent-backgrounds-with-custom-offsets" class="custom-offsets" data-stellar-offset-parent="true" data-stellar-horizontal-offset="20" data-stellar-vertical-offset="20">
      <div class="default-offset-parent">
        <span data-stellar-background-ratio="-1" class="ratio--1">Ratio: -1</span>
        <span data-stellar-background-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
        <span data-stellar-background-ratio="1" class="ratio-1">Ratio 1</span>
        <span data-stellar-background-ratio="2" class="ratio-2">Ratio 2</span>
      </div>
    </div>
    
    <div id="scroll-property-transform">
      <div id="scroll-property-transform-scroller">
        <span data-stellar-ratio="-1" class="ratio--1">Ratio: -1</span>
        <span data-stellar-ratio="0.5" class="ratio-0-5">Ratio: 0.5</span>
        <span data-stellar-ratio="1" class="ratio-1">Ratio 1</span>
        <span data-stellar-ratio="2" class="ratio-2">Ratio 2</span>
      </div>
    </div>
    
  </div>
  
  <script src="jquery.stellar_test.js"></script>
</body>
</html>
